<template>
  <div :data-theme="theme" class="store-home productSort"
       :style="{backgroundImage: `linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%),url(${merchantAPPInfo.backImage})`}">
    <tui-skeleton v-if="skeletonShow"></tui-skeleton>
    <view class="sys-head skeleton-rect" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="fixed-top">
      <view class='navbarCon acea-row' :style="{ paddingRight: navbarRight + 'px',width:leftWindowWidth+ 'px' }">
        <view class="select_nav acea-row row-around tui-skeleton-rect homeBox" id="home" ref="selectNav">
          <text class="iconfont icon-fanhui2" @tap="returns"></text>
          <text class="nav_line"></text>
          <text class="iconfont icon-shouye4" @tap="goIndex"></text>
        </view>

        <navigator :url="'/pages/goods/goods_list/index?merId='+merId" class="input tui-skeleton-rect searchIpt"
                   hover-class="none" :style="{ top: homeTop + 'rpx',width:searchIptWindowWidth+ 'px' }">
          <text
              class="iconfont icon-xiazai5"></text>
          输入商品名称搜索
        </navigator>
      </view>
    </view>
    <scroll-view class="main" scroll-y="true" @scroll="scrollHome">
      <merHome class="tui-skeleton-rect" :merchantInfo="merchantAPPInfo" :merId="merId" type="detail"
               @merHomeHeight="merHomeHeight"></merHome>
      <view class="tab-cont">
        <!-- 分类 -->
        <view v-if="tabActive === 1">
          <mer-classify :merId="merId"></mer-classify>
        </view>
        <!-- 优惠券 -->
        <view v-if="tabActive === 2" class="couponBox">
          <mer-coupon :merId="merId"></mer-coupon>
        </view>
      </view>
    </scroll-view>
  </div>
</template>


<script>

import {
  getMerCategoryApi,
} from '@/api/merchant.js';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue'
import merCoupon from '../coupon/index.vue';
import merClassify from '../classify/index.vue';
import {
  mapGetters
} from "vuex";
import {
  getCoupons,
  setCouponReceive,
} from '@/api/api.js';
import {
  toLogin
} from '@/libs/login.js';
import emptyPage from '@/components/emptyPage.vue'
import Cache from '@/utils/cache';
import merHome from '@/components/merHome/index.vue'
import {
  goProductDetail
} from '@/libs/order.js'
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
import easyLoadimage from '@/components/base/easy-loadimage.vue';

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
let app = getApp();
export default {
  components: {
    WaterfallsFlow,
    emptyPage,
    merHome,
    tuiSkeleton,
    easyLoadimage,
    WaterfallsFlowItem,
    merClassify,
    merCoupon
  },
  props: {
    merId: { // 商户id
      type: Number,
      default: 0
    }, //底部菜单选中的索引
    tabActive: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      //普通价格

      svipPriceStyle: {
        svipBox: {
          height: '26rpx',
          borderRadius: '12rpx 56rpx 56rpx 20rpx',
        },
        icon: {
          height: '26rpx',
          fontSize: '18rpx',
          borderRadius: '12rpx 0 12rpx 2rpx'
        },
        price: {
          fontSize: '38rpx'
        },
        svipPrice: {
          fontSize: '22rpx'
        },
        topStyle: {
          top: '0'
        }
      },
      //svip价格

      svipIconStyle: {
        svipBox: {
          height: '26rpx',
          borderRadius: '24rpx 40rpx 40rpx 0.4rpx',
        },
        price: {
          fontSize: '38rpx'
        },
        svipPrice: {
          fontSize: '18rpx'
        }
      },
      urlDomain: this.$Cache.get("imgHost"),
      statusBarHeight: 0,
      navList: [{
        type: 1,
        name: '商家券',
        count: 0
      },
        {
          type: 2,
          name: '商品券',
          count: 0
        }
      ],
      type: 1,
      mer_banner: '../images/store.png',
      couponsList: [],
      loadTitle: '加载更多',
      categoryLoading: false,
      category: [],

      productList: [],
      scrollTop: 0,

      sortPrice: '',
      skeletonShow: true, //骨架屏显示隐藏

      navShow: false,
      navActive: 0,


      isColumn: true, // 商品列表排列方式

      stock: 0,
      price: 0,

      goodsLoading: false,
      loadendcoupon: false,
      loadingcoupon: false,
      page: 1,
      limit: 10,
      homeTop: 20,
      navbarRight: 0,
      theme: app.globalData.theme,
      storeHeight: 0, //商户信息高度

      rightSafeArea: 0, // 微信小程序右上角的胶囊菜单宽度

      leftWindowWidth: 0, //小程序头部左侧除去右上角的胶囊菜单宽度的长度

      searchIptWindowWidth: 0, //小程序端搜索框长度

      isShowTop: false //控制头部是否固定

    }
  },
  computed: {
    ...mapGetters(["merchantClassify", "merchantType", 'isLogin', 'uid', 'merchantAPPInfo']),
  },
  // 滚动监听

  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件

    uni.$emit('scroll');
    window.addEventListener('scroll', this.handleScroll)
  },
  onShow() {
    // #ifdef MP || APP-PLUS
    this.statusBarHeight = statusBarHeight;
    // #endif
    // #ifdef H5
    this.statusBarHeight = 20;
    // #endif
  },

  created() {
    // #ifdef MP

    // 获取窗口信息

    const windowInfo = uni.getWindowInfo()
    // 获取胶囊左边界坐标

    this.leftWindowWidth = uni.getMenuButtonBoundingClientRect().left;
    const query = uni.createSelectorQuery().in(this);
    const homeWidth = 0
    //搜索框宽度

    query.select('#home').boundingClientRect(data => {
      this.searchIptWindowWidth = this.leftWindowWidth - data.width - 50
    }).exec();
    // #endif

  },
  onLoad(options) {
    //	this.merid = parseInt(options.id)
    // #ifdef MP || APP-PLUS

    this.statusBarHeight = statusBarHeight;
    // #endif

    // #ifdef H5

    this.statusBarHeight = 20;
    // #endif
  },
  mounted: function () {
    // #ifdef MP || APP-PLUS

    this.statusBarHeight = statusBarHeight;
    // #endif

    // #ifdef H5

    this.statusBarHeight = 20;
    // #endif

    this.$store.dispatch('MerTypeList');
    this.skeletonShow = false;
  },
  methods: {
    handleScroll() {
      const t = document.documentElement.scrollTop || document.body.scrollTop
      if (t > 100) {
        this.isShowTop = true
      } else {
        this.isShowTop = false
      }
    },
    //头部商户信息高度

    merHomeHeight(e) {
      this.storeHeight = e;
    },
    goIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    // 后退

    returns: function () {
      uni.navigateBack()
    },
    onTouchmove(e) {
      if (this.loadend) return;
      if (this.loading) return;
      if (this.goodsLoading) return;
      const query = uni.createSelectorQuery().in(this);
      query.select('#goods').boundingClientRect(data => {
        if (data.bottom < 1500 && data.top < 0) {

          this.getGoods();
        }
      }).exec();
      // 模拟触底刷新

    },
    // 商铺首页滚动 navbar 吸顶

    scrollHome: function (e) {
      uni.$emit('scroll');
      this.navShow = e.detail.scrollTop >= this.storeHeight - 20;
    },
    returns() {
      uni.navigateBack()
    },
  },
}
</script>


<style lang="scss" scoped>
.headerfixed {
  /* #ifdef H5 */
  top: 88rpx;
  /* #endif */
  z-index: 99;
  position: fixed;
}

.iconfont {
  font-size: 28rpx !important;
}

.select_nav {
  width: 140rpx;
  height: 54rpx;
  border-radius: 33rpx;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  font-size: 18px;
  line-height: 54rpx;
  align-items: center;
}

.px-20 {
  padding: 0 20rpx 0;
}

.nav_line {
  content: '';
  display: inline-block;
  width: 1px;
  height: 34rpx;
  background: #b3b3b3 !important;
  color: #b3b3b3 !important;
}

.navbarCon {
  padding: 10rpx 20rpx 0 20rpx;
  /* #ifdef H5 || APP */
  width: 800rpx !important;
  /* #endif */
}

.h5_back {
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  width: 140rpx;
  height: 54rpx;
  background: #3B3F41;
  border-radius: 27rpx;

  .iconfont {
    color: #fff;
  }
}

.input {
  display: flex;
  align-items: center;
  /* #ifdef MP */
  //width: 42%;

  /* #endif */
  /* #ifndef MP */
  width: 538rpx;
  /* #endif */
  height: 55rpx;
  padding: 0 0 0 30rpx;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 33rpx;
  color: #D9D9D9;
  font-size: 26rpx;
  // margin: auto;

  background: rgba(255, 255, 255, 0.3);
  margin-left: 20rpx;

  .iconfont {
    margin-right: 20rpx;
    font-size: 26rpx;
    color: #D9D9D9;
  }
}

.select {
  @include main_color(theme);
  @include coupons_border_color(theme);
}

.sold {
  font-size: 20rpx;
  color: #888888;
}

.navCoupon {
  width: 100%;
  height: 80rpx;
  color: #999999;
  background-color: #fff;
}

.navCoupon .acea-row {
  border-top: 5rpx solid transparent;
  border-bottom: 5rpx solid transparent;
  cursor: pointer;
}

.navCoupon .acea-row.on {
  @include tab_border_bottom(theme);
  @include main_color(theme);
}

.tab-cont {
  background: #faf8f4;
  min-height: 500rpx;
}

.couponBox {
  ::v-deep .empty-box {
    padding-top: 200rpx;
    margin-top: 0 !important;
  }
}

.main {
  flex: 1;
  min-height: 0rpx;
  height: calc(100vh - var(--window-top)); //calc()是动态计算函数


  ::v-deep .store {
    padding: 0 24rpx 24rpx 24rpx;
  }

  ::v-deep .noCheck {
    color: #666;
  }

  ::v-deep .pictrue {
    width: 74rpx;
    height: 74rpx;
    border-radius: 6rpx;
    overflow: hidden;
  }
}

.font-bg-red {
  padding: 4rpx;
  @include main_bg_color(theme);
  color: #fff;
  font-size: 18rpx;
  display: inline-block;
  border-radius: 4rpx;
}

.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 20rpx;
  padding-left: 24rpx;
  background-color: #F5F5F5;
  width: 100%;
}

.coupon-list {
  margin-top: 0;

  .right {
    position: relative;
    overflow: hidden;
  }
}

.coupon {
  padding: 24rpx;
  background-color: #F5F5F5;

  .item {
    display: flex;
    margin-bottom: 16rpx;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 240rpx;
      font-weight: 500;
      font-size: 24rpx;
      line-height: 1;
      color: #FFFFFF;

      &.gary {
        background-image: url('');
      }

      .money {
        text {
          margin-left: 10rpx;
          font-size: 60rpx;
        }

      }
    }

    .right {
      flex: 1;
      min-width: 0;
      padding: 0 20rpx;
      background-color: #FFFFFF;

      .name {
        border-bottom: 1rpx solid #F0F0F0;
        font-weight: 500;
        height: 115rpx;
        font-size: 30;
        line-height: 46rpx;
        color: #282828;
        padding: 15rpx 0;

        text {
          display: inline-block;
          // width: 84rpx;

          // height: 28rpx;

          padding: 0 10rpx;
          border-radius: 14rpx;
          margin-right: 15rpx;
          background-color: #FFF4F3;
          font-weight: 500;
          font-size: 20rpx;
          line-height: 26rpx;
          text-align: center;
          @include main_color(theme);
          @include coupons_border_color(theme);

          &.gary {
            border-color: #BBB;
            color: #bbb;
            background-color: #F5F5F5;
          }
        }
      }

      .time-wrap {
        display: flex;
        align-items: center;
        padding-top: 16rpx;
        padding-bottom: 16rpx;
        font-weight: 500;
        font-size: 20rpx;
        color: #999999;

        .time {
          flex: 1;
          min-width: 0;
        }

        .button {
          width: 136rpx;
          height: 44rpx;
          border-radius: 22rpx;
          @include main_bg_color(theme);
          font-weight: 500;
          font-size: 22rpx;
          line-height: 44rpx;
          text-align: center;
          color: #FFFFFF;

          &.gary {
            background-color: #999;
          }
        }
      }
    }
  }

  .disabled {
    .left {
      background-image: url(../../static/images/coupon2.png);
    }

    .right {
      .name {
        text {
          border-color: #C1C1C1;
          color: #C1C1C1;
        }
      }

      .time-wrap {
        .button {
          background-color: #CCCCCC;
          color: #FFFFFF;
        }
      }
    }
  }
}

.category {
  padding-top: 34rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;

  .section {
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    background-color: #FFFFFF;

    .head {
      position: relative;
      display: flex;
      align-items: center;
      height: 90rpx;
      padding-right: 20rpx;
      padding-left: 36rpx;
      font-weight: bold;
      color: #282828;

      &::before {
        content: " ";
        position: absolute;
        top: 50%;
        left: 20rpx;
        width: 6rpx;
        height: 24rpx;
        @include main_bg_color(theme);
        transform: translateY(-50%);
      }

      .title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 30rpx;
      }

      .iconfont {
        font-size: 22rpx;
        line-height: 1;
      }
    }

    .body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 9rpx 36rpx 14rpx;

      .item {
        width: 314rpx;
        height: 84rpx;
        padding-right: 30rpx;
        padding-left: 30rpx;
        border-radius: 10rpx;
        background-color: #F5F5F5;
        margin-bottom: 10rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 500;
        font-size: 26rpx;
        line-height: 84rpx;
        color: #282828;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  width: 100%;
  padding-top: 12rpx;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/

  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

  background-color: #FFFFFF;
  opacity: 0.96;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 20rpx;
    color: #282828;

    .iconfont {
      font-size: 43rpx !important;
    }
  }

  .active {
    @include main_color(theme);
  }
}

.productList {
  background: #f5f5f5;
}

.productList .list.on {
  border-radius: 14rpx;
  margin-top: 0 !important;
  background-color: #fff;
  padding: 40rpx 0 0 0;

}

.productList .list .item {
  width: 335rpx;
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 20rpx;
}

.productList .list.item {
  &::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 10px;
    left: 125px;
    border-top: 0.5px solid #f5f5f5;
  }
}

.productList .list .item.on {
  width: 100%;
  display: flex;
  padding: 0 24rpx 50rpx 24rpx;
  margin: 0;
  border-radius: 14rpx;
  overflow: hidden;
}

.productList .list .item .proPic,
::v-deep .easy-loadimage,
uni-image {
  position: relative;
}

.productList .list .item .proPic.on ::v-deep .easy-loadimage,
uni-image uni-image {
  width: 240rpx;
  height: 240rpx;
  border-radius: 14rpx;
  overflow: hidden;
}

.productList .list .item .proPic image.on {
  border-radius: 6rpx;
  overflow: hidden;
}

.productList .list .item .text.on {

  width: 456rpx;
  padding: 0 0 0 20rpx;
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 94%;
    border-bottom: 1rpx solid #f6f6f6;
    position: absolute;
    right: 2rpx;
    bottom: -24rpx;
  }
}

.productList .list .item .text .name {
  font-size: 28rpx;
  font-weight: bold;
  margin-top: 8rpx;
  color: #333333;
  margin-bottom: 30rpx;
}

.productList .list .item .text .money.on {
  //margin-top: 80rpx;

}

.productList .list .item .text .money .num {
  font-size: 38rpx;
  font-weight: 900;
  @include price_color(theme);
}

.productList .list .item .text .y-money {
  font-size: 26rpx;
  color: #888888;
  text-decoration: line-through;
  margin-left: 14rpx;
}

.store-home-top {
  width: 100%;
  height: 360rpx;
  position: relative;
}

.store-home {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
  background: left top/750rpx 390rpx no-repeat fixed;
  overflow: hidden;
}

.fixed-top {
  top: 0;
  left: 0;
  z-index: 9;
  margin-bottom: 24rpx;
}

.nav.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  display: flex;

  .nav-cont {
    position: absolute;
    width: 80%;
    justify-content: space-between;
  }
}

.nav {
  position: relative;
  padding: 0 30rpx;
  margin-bottom: 20rpx;

  .nav-cont {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // height: 84rpx;

  }

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;

    .cont {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 12rpx;
      height: 44rpx;
      border-radius: 22rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;

      .arrow-icon {
        margin-left: 10rpx;
        font-size: 18rpx;
      }

      .layout-icon {
        font-size: 32rpx;
      }

      .icon-pailie {
        font-size: 32rpx;
      }

      image {
        width: 15rpx;
        height: 21rpx;
        margin-left: 7rpx;
      }
    }
  }

  .active {
    .cont {
      background-color: #FFFFFF;
      font-weight: bold;
      @include main_color(theme);
    }
  }

  .select {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    width: 100%;
    padding-right: 40rpx;
    padding-bottom: 28rpx;
    padding-left: 74rpx;
    border-bottom-right-radius: 24rpx;
    border-bottom-left-radius: 24rpx;
    background-color: #FFFFFF;

    .item {
      margin-top: 28rpx;
      font-size: 24rpx;
      color: #454545;
    }

    .active {
      //background: url(../../../static/images/active.png) right center/20rpx no-repeat;

      color: #8B4513;
    }
  }
}


.icon-dingbufanhui,
.icon-more {
  color: #fff;
}

.searchIpt {
  /* #ifdef H5 || APP */
  width: 550rpx !important;
  height: 54rpx;
  line-height: 54rpx;
  /* #endif */
}

.productSort .header .input {
  width: 558rpx;
  height: 60rpx;
  background-color: #3F4244;
  border-radius: 50rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
}

.productSort .header .input .iconfont {
  font-size: 26rpx;
  color: #666;
}

.productSort .header .input .place {
  padding-left: 12rpx;
  color: #ccc;
  font-size: 26rpx;
}

.pic-num {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.m-l-8 {
  margin-left: 8rpx;
}

.conts {
  color: #fff;
}

.buyed {
  font-size: 20rpx;
  color: #888888;
}
</style>